<style lang="sass" scoped>
	@import '../../assets/login.scss';
</style>

<template lang="">

	<div class="login-container">
		<van-nav-bar title="忘记密码" left-text="返回" left-arrow @click-left="back" />
		<div class="title" style="margin-top:0.3rem;">
			<p class="text">{{title}}</p>
		</div>
		<van-form v-if="step === 0" class="form" @submit="check">
			<div class="form-item">
				<van-field v-model="checkForm.phone" label="手机号码" name="phone" type="number" placeholder="请输入手机号码"
					size="large" :rules="[{required:true,pattern:/^[1]([3-9])[0-9]{9}$/}]" center clearable></van-field>
			</div>
			<div class="form-item">
				<van-field v-model="checkForm.imgCode" label="图片验证码" name="imgCode" center clearable
					placeholder="请输入图片验证码" :rules="[{required:true}]">
					<template slot="button">
						<van-image width="1.7rem" height="0.6rem" :src="imgCodeImg" @click="refreshImgCode"></van-image>
					</template>
				</van-field>
			</div>
			<div class="form-item">
				<van-field v-model="checkForm.code" type="number" label="短信验证码" name="code" center clearable
					placeholder="请输入短信验证码" :rules="[{required:true}]">
					<template slot="button">
						<van-button v-if="!showCountDown" size="small" type="primary" color="#179AFE"
							style="width:1.7rem;" native-type="button" @click.stop="sendCode">发送验证码</van-button>
						<van-count-down v-else ref="countDown" :time="60 * 1000" use-slot :auto-start="false"
							@change="timeChange" @finish="countDownFinish">
							<span class="time"> {{ timeData.seconds }}秒后重新获取</span>
						</van-count-down>
					</template>
				</van-field>
			</div>
			<div class="btn-box">
				<van-button type="default" color="#179AFE" native-type="submit" block>验证手机号</van-button>
			</div>
		</van-form>
		<van-form v-else class="form" @submit="reset">
			<div class="form-item">
				<p class="label">密码</p>
				<van-field v-model="form.password" name="phone" type="password" placeholder="请输入密码" size="large"
					:rules="[{required:true}]" center clearable></van-field>
			</div>
			<div class="form-item">
				<p class="label">确认密码</p>
				<van-field v-model="form.repeatPassword" name="phone" type="password" placeholder="请再次输入密码" size="large"
					:rules="[{required:true,validator:validatorPassword}]" center clearable></van-field>
			</div>
			<div class="btn-box">
				<van-button type="default" color="#179AFE" native-type="submit" block>设置新密码</van-button>
			</div>
		</van-form>
	</div>
</template>

<script>
	import {
		baseUrl,
		getCode,
		checkCode,
		resetPassword
	} from '../../api/index';
	import {
		isPhone
	} from '../../utils/validate';

	export default {
		name: 'ResetPassword',
		data() {
			return {
				step: 0,
				imgCodeImg: baseUrl + 'authImage', //图片验证码地址
				checkForm: {
					phone: '',
					imgCode: '',
					code: ''
				},
				showCountDown: false,
				timeData: {},
				form: {
					password: '',
					repeatPassword: ''
				}
			};
		},
		computed: {
			title() {
				return this.step === 0 ? '忘记密码' : '设置新密码';
			}
		},
		methods: {
			back() {
				if (this.step === 0) {
					this.$router.back();
				} else {
					this.step = 0;
				}
			},
			validatorPassword(val) {
				return this.form.password === this.form.repeatPassword;
			},
			refreshImgCode() {
				this.imgCodeImg = this.imgCodeImg + `?time=${new Date().getTime()}`;
			},
			timeChange(time) {
				this.timeData = time;
			},
			countDownFinish() {
				this.showCountDown = false;
				this.refreshImgCode();
			},
			async sendCode() {
				if (!isPhone(this.checkForm.phone) || !this.checkForm.imgCode) {
					this.$toast('请输入手机号和图片验证码!');
					return;
				} else {
					try {
						const codeParams = {
							phonenum: this.checkForm.phone,
							imgcode: this.checkForm.imgCode
						};

						const {
							errorcode,
							errormsg
						} = await getCode('passwdcode', codeParams);

						if (errorcode == 0) {
							this.$toast('发送成功,请注意查收');

							this.showCountDown = true;

							this.$nextTick(() => {
								this.$refs.countDown.start();
							});
						} else {
							this.$toast(errormsg);
						}
					} catch (error) {
						this.showCountDown = false;
						console.log(error);
					}
				}
			},
			async check() {
				try {
					const params = {
						phonenum: this.checkForm.phone,
						code: this.checkForm.code
					};

					const {
						errorcode,
						errormsg
					} = await checkCode(params);

					if (errorcode == 0) {
						this.step = 1;
						document.title = '重置密码';
					} else {
						this.$toast(errormsg);
					}
				} catch (error) {
					console.log(error);
				}
			},
			async reset() {
				try {
					const params = {
						phonenum: this.checkForm.phone,
						newpasswd: this.form.password
					};

					const {
						errorcode,
						errormsg
					} = await resetPassword(params);

					if (errorcode == 0) {
						this.$toast('设置成功');
						this.$router.back();
					} else {
						this.$toast(errormsg);
					}
				} catch (error) {
					console.log(error);
				}
			}
		}
	};
</script>
